import React, { Component } from 'react';
import { Link } from 'react-router-dom';

// require('./../mock')

class Com extends Component {
  constructor(props) {
    super(props);
    
    this.state={
      dat:[]
    }
  }
  componentDidMount() {
    // localStorage.removeItem('f_name');
  }
  goJC () {
    let jc = this.refs.jc.innerHTML
    localStorage.setItem('f_name', JSON.stringify(jc))
    this.props.history.push('/fkind')
  }
  goKS(){
    let ks = this.refs.ks.innerHTML
    localStorage.setItem('f_name', JSON.stringify(ks))
    this.props.history.push('/fkind')
  }
  goXF(){
    let xf = this.refs.xf.innerHTML
    localStorage.setItem('f_name', JSON.stringify(xf))
    this.props.history.push('/fkind')
  }
  goZC(){
    let zc = this.refs.zc.innerHTML
    localStorage.setItem('f_name', JSON.stringify(zc))
    this.props.history.push('/fkind')
  }
  goRR(){
    let rr = this.refs.rr.innerHTML
    localStorage.setItem('f_name', JSON.stringify(rr))
    this.props.history.push('/fkind/meat')
  }
  goY(){
    let y = this.refs.y.innerHTML
    localStorage.setItem('f_name', JSON.stringify(y))
    this.props.history.push('/fkind')
  }
  goSC(){
    let sc = this.refs.sc.innerHTML
    localStorage.setItem('f_name', JSON.stringify(sc))
    this.props.history.push('/fkind/veg')
  }
  goJD(){
    let jd = this.refs.jd.innerHTML
    localStorage.setItem('f_name', JSON.stringify(jd))
    this.props.history.push('/fkind')
  }
  goTG(){
    let tg = this.refs.tg.innerHTML
    localStorage.setItem('f_name', JSON.stringify(tg))
    this.props.history.push('/fkind')
  }
  goHP(){
    let hp = this.refs.hp.innerHTML
    localStorage.setItem('f_name', JSON.stringify(hp))
    this.props.history.push('/fkind')
  }
  goZS(){
    let zs = this.refs.tg.innerHTML
    localStorage.setItem('f_name', JSON.stringify(zs))
    this.props.history.push('/fkind')
  }
  goMT(){
    let mt = this.refs.tg.innerHTML
    localStorage.setItem('f_name', JSON.stringify(mt))
    this.props.history.push('/fkind')
  }
  goSS(){
    let ss = this.refs.tg.innerHTML
    localStorage.setItem('f_name', JSON.stringify(ss))
    this.props.history.push('/fkind')
  }
  
  render() {
    return (
      <div className="Home_nav">      
      <ul>
        <li>
          <p className="iconfont icon-chushimao1"></p><span onClick={this.goJC.bind(this) } ref ="jc">家常菜</span>
        </li>
        <li >
          <p className="iconfont icon-shijian1" ></p><span onClick={this.goKS.bind(this)} ref ="ks">快手菜</span>
        </li>
        <li>
          <p className="iconfont icon-jidan1" ></p><span onClick={this.goXF.bind(this)} ref="xf">下饭菜</span>
        </li>
        <li>
          <p className="iconfont icon-taiyang-copy" ></p><span onClick={this.goZC.bind(this)} ref="zc">早餐</span>
        </li>
        <li className="Home_nav_M" >
          <p className="iconfont icon-Shape" ></p><span onClick={this.goRR.bind(this)} ref="rr">肉</span>
          <b></b>
            <div className="Home_nav_meat">
              <div className="nav_meat_A">
                <span className="nav_meat_H">猪肉</span>
                <ul>
                    <li><Link to="/fkind/meat">排骨</Link></li>
                    <li><Link to="/fkind/meat">五花肉</Link></li>
                    <li><Link to="/kind/category/:id">里脊</Link></li>
                    <li><Link to="/kind/category/:id">猪肉末</Link></li>
                    <li><Link to="/kind/category/:id">瘦肉</Link></li>
                    <li><Link to="/kind/category/:id">猪蹄</Link></li>
                    <li><Link to="/kind/category/:id">猪肝</Link></li>
                    <li><Link to="/kind/category/:id">更多</Link></li>
                  </ul>
              </div>
              <div className="nav_meat_A">
                <span className="nav_meat_H">鸡</span>
                <ul>
                    <li><Link to="/fkind/meat">鸡腿</Link></li>
                    <li><Link to="/fkind/meat">鸡肉</Link></li>
                    <li><Link to="/kind/category/:id">鸡翅</Link></li>
                    <li><Link to="/kind/category/:id">鸡爪</Link></li>
                    <li><Link to="/kind/category/:id">土鸡</Link></li>
                    <li><Link to="/kind/category/:id">三黄鸡</Link></li>
                    <li><Link to="/kind/category/:id">鸡胗</Link></li>
                    <li><Link to="/kind/category/:id">更多</Link></li>
                  </ul>
              </div>
              <div className="nav_meat_A">
                <span className="nav_meat_H">牛肉</span>
                <ul>
                    <li><Link to="/fkind/meat">牛腩</Link></li>
                    <li><Link to="/fkind/meat">肥牛</Link></li>
                    <li><Link to="/kind/category/:id">牛排</Link></li>
                    <li><Link to="/kind/category/:id">牛肉末</Link></li>
                    <li><Link to="/kind/category/:id">牛瘦肉</Link></li>
                    <li><Link to="/kind/category/:id">牛尾</Link></li>
                    <li><Link to="/kind/category/:id">牛筋</Link></li>
                    <li><Link to="/kind/category/:id">更多</Link></li>
                  </ul>
              </div>
              <div className="nav_meat_A">
                <span className="nav_meat_H">鸭</span>
                <ul>
                    <li><Link to="/fkind/meat">鸭腿</Link></li>
                    <li><Link to="/fkind/meat">鸭翅</Link></li>
                    <li><Link to="/kind/category/:id">鸭胗</Link></li>
                    <li><Link to="/kind/category/:id">鸭掌</Link></li>
                    <li><Link to="/kind/category/:id">老鸭</Link></li>
                    <li><Link to="/kind/category/:id">鸭脖</Link></li>
                    <li><Link to="/kind/category/:id">鸭舌</Link></li>
                    <li><Link to="/kind/category/:id">更多</Link></li>
                  </ul>
              </div>
            </div>
        </li>
        <li>
          <p className="iconfont icon-yu" ></p><span  onClick={this.goY.bind(this)} ref="y">鱼</span>
        </li>
        <li className="Home_nav_V">
          <p className="iconfont icon-shucai_huabanfuben" ></p><span onClick={this.goSC.bind(this)} ref="sc">蔬菜</span>
            <b></b>
            <div className="Home_nav_Vegetables">
            <div className="nav_meat_A">
                <span className="nav_meat_S">果实类蔬菜</span>
                <ul>
                    <li><Link to="/fkind/veg">茄子</Link></li>
                    <li><Link to="/fkind/veg">番茄</Link></li>
                    <li><Link to="/kind/category/:id">玉米</Link></li>
                    <li><Link to="/kind/category/:id">南瓜</Link></li>
                    <li><Link to="/kind/category/:id">丝瓜</Link></li>
                    <li><Link to="/kind/category/:id">冬瓜</Link></li>
                    <li><Link to="/kind/category/:id">豆角</Link></li>
                    <li><Link to="/kind/category/:id">更多</Link></li>
                  </ul>
              </div>
              <div className="nav_meat_A">
                <span className="nav_meat_S">根茎蔬菜</span>
                <ul>
                    <li><Link to="/fkind/veg">土豆</Link></li>
                    <li><Link to="/fkind/veg">萝卜</Link></li>
                    <li><Link to="/kind/category/:id">藕</Link></li>
                    <li><Link to="/kind/category/:id">山药</Link></li>
                    <li><Link to="/kind/category/:id">笋</Link></li>
                    <li><Link to="/kind/category/:id">红薯</Link></li>
                    <li><Link to="/kind/category/:id">芋头</Link></li>
                    <li><Link to="/kind/category/:id">更多</Link></li>
                  </ul>
              </div>
              <div className="nav_meat_A">
                <span className="nav_meat_S">菌菇类</span>
                <ul>
                    <li><Link to="/fkind/veg">香菇</Link></li>
                    <li><Link to="/fkind/veg">杏鲍菇</Link></li>
                    <li><Link to="/kind/category/:id">金针菇</Link></li>
                    <li><Link to="/kind/category/:id">木耳</Link></li>
                    <li><Link to="/kind/category/:id">茶树菇</Link></li>
                    <li><Link to="/kind/category/:id">猴头菇</Link></li>
                    <li><Link to="/kind/category/:id">平菇</Link></li>
                    <li><Link to="/kind/category/:id">更多</Link></li>
                  </ul>
              </div>
              <div className="nav_meat_A">
                <span className="nav_meat_S">叶类蔬菜</span>
                <ul>
                    <li><Link to="/fkind/veg">韭菜</Link></li>
                    <li><Link to="/fkind/veg">菠菜</Link></li>
                    <li><Link to="/kind/category/:id">圆白菜</Link></li>
                    <li><Link to="/kind/category/:id">油菜</Link></li>
                    <li><Link to="/kind/category/:id">娃娃菜</Link></li>
                    <li><Link to="/kind/category/:id">空心菜</Link></li>
                    <li><Link to="/kind/category/:id">油麦菜</Link></li>
                    <li><Link to="/kind/category/:id">更多</Link></li>
                  </ul>
              </div>
            </div>
        </li>
        <li>
          <p className="iconfont icon-jidan1" ></p><span onClick={this.goJD.bind(this)} ref="jd">鸡蛋</span>
        </li>
        <li>
          <p className="iconfont icon-rice" ></p><span onClick={this.goTG.bind(this)} ref="tg">汤羹</span>
        </li>
        <li>
          <p className="iconfont icon-jidan1" ></p><span onClick={this.goHP.bind(this)} ref="hp">洪培</span>
        </li>
        <li>
          <p className="iconfont icon-rice" ></p><span onClick={this.goZS.bind(this)} ref="zs">主食</span>
        </li>
        <li>
          <p className="iconfont icon-miantiao" ></p><span onClick={this.goMT.bind(this)} ref="mt">面</span>
        </li>
        <li>
          <p className="iconfont icon-xiaomai" ></p><span onClick={this.goSS.bind(this)} ref="ss">素食</span>
        </li>

      </ul>
      <ul>
        <li>
          <Link to=""><p className="iconfont icon-rice" ></p><span>孕妇</span></Link>
        </li>
        <li>
          <Link to=""><p className="iconfont icon-miantiao" ></p><span>产妇</span></Link>
        </li>
        <li>
          <Link to=""><p className="iconfont icon-xiaomai" ></p><span>婴儿</span></Link>
        </li>
        <li>
          <Link to=""><p className="iconfont icon-xiaomai" ></p><span>儿童</span></Link>
        </li>
      </ul>
      <em className="Home_nav_fl">
        <Link to="/kind">全部菜谱分类</Link>
      </em>
      <div className="Nav_erweima">
        {/* <p className="iconfont icon-xin"></p>
          <em></em>
          <b>扫一扫下载<Link to=""><span>下厨房</span></Link>APP</b> */}
        <Link to=""><span></span></Link>
      </div>
          
    </div>
    )
  }
}

export default Com;